import styles from "../styles/nav.module.less";
import {NavLink} from "react-router-dom";
import type {routerType} from "../routers/router";
import styled from "styled-components";

const Container = styled.div`
  min-width: 200px;
`;

const NavItem = styled.div`
  padding: 5px 20px;
  border: 1px solid #ccc;
  /* border: 1px red solid; */
`;

const ActivekWarp = styled(NavLink)`
`;

function NavLinkWarp({item}: {item: routerType}) {
  return (
    <>
      <ActivekWarp
        style={({isActive}) => {
          return {color: isActive ? "red" : "black"};
        }}
        to={item.path}
      >
        {item.meta}
      </ActivekWarp>
    </>
  );
}

function Nav({menu}: {menu: routerType[]}) {
  const menu_list = menu || [];
  const dom_menu = menu_list.map((item: routerType, index: number) => {
    return (
      <NavItem key={index}>
        <NavLinkWarp key={index} item={item}></NavLinkWarp>
      </NavItem>
    );
  });
  return (
    <>
      <Container>{dom_menu}</Container>
    </>
  );
}

export default Nav;
